<template>
	<view class="content">
		<view class="houseMessage">房屋信息</view>
		<view class="center">
			<!-- {{form}} -->
			<uni-data-picker v-model="buildingid" :map="{text:'name',value:'id'}" :localdata="Housees"
				popup-title="请选择班级" @change="onchange" @nodeclick="onnodeclick">
				<view class="item">
					<view class="community">小区</view>
					<view class="selectCommunity">
						<view class="select">{{Checked}}</view>
						<view class="iconfont icon-right-1-copy"></view>
					</view>
				</view>
			</uni-data-picker>
			<picker @change="bindPickerChange" :value="HouseIndex" :range="array" range-key="houseno">
				<view class="item">
					<view class="community">楼栋房号</view>
					<view class="selectCommunity">
						<view class="select">{{BuildChecked}}</view>
						<view class="iconfont icon-right-1-copy"></view>
					</view>
				</view>
			</picker>
			<picker range-key="name" @change="bindChange" :value="indexs" :range="userinfotype">
				<view class="item">
					<view class="community">住户类型</view>
					<view class="selectCommunity">
						<view class="select">{{userinfotype[indexs]?userinfotype[indexs].name:'请选择居民类型'}}</view>
						<view class="iconfont icon-right-1-copy"></view>
					</view>
				</view>
			</picker>
		</view>
		<view class="houseMessage">个人信息</view>
		<view class="center">
			<view class="item">
				<view class="community name">姓名</view>
				<view class="selectCommunity">
					<input class="uni-input" v-model="form.name" focus placeholder="请填写姓名" />
					<view class="iconfont icon-right-1-copy"></view>
				</view>
			</view>
			<view class="item" style="border-bottom: 0;">
				<view class="community name">联系电话</view>
				<view class="selectCommunity">
					<input class="uni-input" v-model="form.mobile" focus placeholder="请输入" />
					<view class="iconfont icon-right-1-copy"></view>
				</view>
			</view>
		</view>
		<view class="submit" @click="sumbit">提交</view>
	</view>
</template>

<script>
	import {
		buildingList,
		housesList,
		userinfotypeList,
		adduserinfo
	} from "../../apis/index.js"
	export default {
		// 去除微信小程序生成多一层标签
		options: {
			virtualHost: true
		},
		created() {
			this.getbuildingList()
			this.getuserinfo()
		},
		data() {
			return {
				builds: "",
				Checked: "请选择小区",
				status_bar_height: 0,
				navigation_bar_height: 44,
				Housees: [],
				array: [],
				userinfotype: [],
				buildingid: 0,
				HouseIndex: "",
				indexs: 0,
				BuildChecked: "请输入房间信息",
				form: {
					photo: "",
					name: "",
					houseid: null,
					usertype: null,
					sex: null,
					mobile: "",
					usernative: "211102200805281516",
					cardid: "",
					usernative: "河北石家庄",
				}
			};
		},
		methods: {
			async sumbit() {
				if (!this.form.houseid) {
					return uni.showToast({
						icon: 'none',
						title: "请选择小区"
					})
				}

				if (!this.form.name) {
					return uni.showToast({
						icon: 'none',
						title: "请输入姓名"
					})
				}

				uni.showLoading({
					title: "正在提交。。。"
				})

				let res = await adduserinfo(this.form).catch(() => undefined)
				console.log("添加居民", res);
				if (!res) return

				uni.hideLoading()

				uni.redirectTo({
					url: `/pages/HouseRenZheng/HouseRenZheng?name=${this.form.name}&Housees=${this.Checked+this.BuildChecked}`
				})
			},
			async getuserinfo() {
				let red = await userinfotypeList()
				this.userinfotype = red.list
				console.log(this.userinfotype[this.indexs].name);

			},
			async gethousesList(buildingid) {
				let results = {
					buildingid
				}
				let res = await housesList(results)
				console.log(res, "999");
				this.array = res.list;

				console.log(this.array, "999999");
			},
			bindPickerChange: function(e) {
				// this.index = e.detail.value
				this.HouseIndex = e.detail.value
				this.BuildChecked = this.array[e.detail.value].houseno
				this.form.houseid = this.array[e.detail.value].id
			},
			bindChange: function(e) {
				// this.index = e.detail.value
				this.indexs = e.detail.value
				let housID = this.usertype[e.detail.value]
				this.form.usertype = housID.id
			},
			async getbuildingList() {
				let res = await buildingList()

				this.Housees = res.list

			},
			onchange(e) {
				const value = e.detail.value
				this.gethousesList(this.buildingid)

				this.Checked = e.detail.value.map(item => item.text).join("");
			},
			onnodeclick(node) {},

		}
	}
</script>

<style lang="less">
	.content {
		padding-bottom: 50rpx;
		background-color: #ffffff;

		.houseMessage {
			width: 100%;
			background-color: #f0f0f0;
			font-size: 30rpx;
			color: #000000;
			padding: 20rpx 20rpx;
			box-sizing: border-box;
		}

		.center {
			padding: 0rpx 30rpx;
			box-sizing: border-box;

			.item {
				padding: 40rpx 0;
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #e3e0e0;
				font-size: 30rpx;
				color: #000000;

				.community {
					width: 50%;
				}

				.selectCommunity {
					color: #898989;
					display: flex;
					align-items: center;

					.icon-right-1-copy {
						font-size: 35rpx;
						padding-left: 20rpx;
					}

					.uni-input {
						font-size: 30rpx;
						text-align: right;

						.uni-input-placeholder {
							font-size: 30rpx;
						}
					}
				}
			}

			.item:nth-child(3) {
				border-bottom: 0;
			}

		}

		.submit {
			margin: 100rpx 130rpx;
			background-color: #5da5f1;
			display: flex;
			justify-content: center;
			padding: 15rpx 0;
			font-size: 30rpx;
			color: #ffffff;
			border-radius: 50rpx;
		}
	}
</style>